import React from 'react'
import styles from '../css/deail.module.css'
import { Collapse, List, Tag } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'

const TicketCollapse = (props) => {
    const seatType = ['ssoftSeat', 'fsoftSeat', 'businessSeat']
    const seatTypeCN = ['二等座', '一等座', '商务座']
    const nav = useNavigate()
    const [sp] = useSearchParams()


    const gotoOrder = (seatTypeCN, price) => {
        nav(`/order?seatTypeCN=${seatTypeCN}&price=${price}&date=${sp.get('date')}`, {
            state: props
        })
    }
    return (
        <div className={styles.collapseBox}>
            <Collapse accordion
                arrowIcon={(active) =>
                (
                    active ? (
                        <Tag color='#ff6430' fill='outline'>
                            收起
                        </Tag>
                    ) : (
                        <Tag color='#ff6430' fill='outline'>
                            预定
                        </Tag>
                    ))
                }
            >
                {
                    seatType.map((v, i) => {
                        return <Collapse.Panel
                            key={i} title={
                                <div className={styles.titleBox}>
                                    <span>
                                        <span>{seatTypeCN[i]}</span>
                                        <span className={styles.price}>￥{props[v].price}</span>
                                    </span>
                                    <span>
                                        {props[v].ticketNum}
                                        {typeof props[v].ticketNum === 'number' ? '张' : ''}
                                    </span>
                                </div>
                            }>
                            <List style={{ '--border-top': 'none', '--border-bottom': 'none' }}>
                                <List.Item
                                    arrowIcon={
                                        <Tag
                                            className={styles.tag}
                                            color='#ff6430'
                                            fill='outline'
                                            onClick={() => gotoOrder(seatTypeCN[i], props[v].price)}
                                        >
                                            买票
                                        </Tag>
                                    }
                                    description={
                                        <span>
                                            含40元出行保障 快速出票 迅捷无忧
                                        </span>}
                                >
                                    <span className={styles.title}>快速预定</span>
                                </List.Item>
                                <List.Item
                                    arrowIcon={
                                        <Tag
                                            className={styles.tag}
                                            color='#ff6430'
                                            fill='outline'
                                            onClick={() => gotoOrder(seatTypeCN[i], props[v].price)}
                                        >
                                            买票
                                        </Tag>
                                    }
                                    description={<span>出票较慢 高峰期需要排队</span>}>
                                    <span>普通预定</span>
                                </List.Item>
                            </List>
                        </Collapse.Panel>
                    })
                }

            </Collapse>

        </div>
    )
}

export default TicketCollapse
